 <template>
  <div class="home-container">
    <!-- 头部导航栏 -->
    <van-nav-bar fixed>
      <template #left>
        <img class="logo" src="@/assets/image/logo.png"/>
      </template>
      <template #right>
        <van-icon @click="$router.push('/search')" name="search" size="0.48rem" color="#fff"/>
      </template>
    </van-nav-bar>

    <!-- 频道列表 - Tabs标签页 -->
    <van-tabs
      v-model="activeId"
      sticky
      offset-top="1.2266666rem"
      animated>
      <van-tab
        v-for="obj in channelList"
        :key="obj.id"
        :title="obj.name"
        :name="obj.id"
        >
        <!-- 这里展示文章列表 -->
        <van-pull-refresh
          v-model="isLoading"
          @refresh="pullDownRefreshFn"
          >
          <van-list
            v-model="loading"
            :finished="done"
            finished-text="我是有底线的！"
            @load="pullUpLoadMoreFn"
            :immediate-check="false"
            offset="50"
            >
            <ArticleList
              :arr="articleList"
              @del-art="delArtFn"/>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <!-- 更多频道的加号 -->
    <van-icon
      name="plus"
      size="0.45rem"
      class="moreChannels"
      @click="show = true"
      />
    <!-- 频道管理的弹层 -->
    <van-popup v-model="show">
      <ChannelEdit
        :userChannelList="channelList"
        @add-channel="addChannelFn"
        @del-channel="delChannelFn"
        @close-popup="show = false"
        @enter-channel="enterChannelFn"
        />
    </van-popup>
  </div>
</template>
<script>
import {
  getUserChannelListAPI,
  getArticleListAPI,
  updateUserChannelListAPI
} from '@/api/home'
import ArticleList from './ArticleList.vue'
import moment from 'moment'
import ChannelEdit from './ChannelEdit.vue'
export default {
  name: 'Home',
  components: { ArticleList, ChannelEdit },
  data () {
    return {
      activeId: 0, // 选中的频道id
      channelList: [], // 用户选择的频道列表
      articleList: [], // 当前展示的文章列表
      loading: false, // 控制每一页的加载状态
      done: false, // 控制列表是否全部加载完毕
      isLoading: false, // 控制下拉的加载状态
      show: false // 控制频道管理弹出层的可见性
    }
  },
  watch: {
    // 侦听器 - 侦听 activeId 变化，变了之后，发请求
    activeId () {
      // 清空之前频道的数据
      this.articleList = []
      // 新的频道从第一页开始请求
      this.timestamp = undefined
      // 新的频道全部加载状态为false
      this.done = false
      this.getArticleList()
    }
  },
  async created () {
    // 1. 获取用户已选择的频道列表
    try {
      const resp = await getUserChannelListAPI()
      this.channelList = resp.data.channels
    } catch (error) {
      console.log(error)
    }

    // 2. 获取当前选中的频道的文章列表
    this.getArticleList()
  },
  methods: {
    // 进入频道
    enterChannelFn (channelId) {
      this.activeId = channelId
      this.show = false
    },
    // 更新用户已选择的频道
    async updateChannelFn () {
      // 组装一个合适的数组格式
      // reduce汇总
      const arr = this.channelList.reduce((sum, obj, idx) => {
        const item = {
          id: obj.id,
          seq: idx + 1
        }
        if (item.id !== 0) {
          sum.push(item)
        }
        return sum
      }, [])
      console.log(arr)
      // 调接口
      const resp = await updateUserChannelListAPI({
        channels: arr
      })
      console.log(resp)
    },
    // 删除频道
    delChannelFn (i) {
      // 1. 从vue变量中删除
      this.channelList.splice(i, 1)
      // 2. 同步到后台
      this.updateChannelFn()
    },
    // 添加频道
    addChannelFn (itemObj) {
      // 1. 添加vue变量中
      this.channelList.push(itemObj)
      // 2. 同步到后台
      this.updateChannelFn()
    },
    // 删除文章不感兴趣
    delArtFn (idx) {
      this.articleList.splice(idx, 1)
      // 判断一下可视区的高度 / 除以 每个 ArticleItem 的高度，
      // 表示可视区能容纳几个 ArticleItem， 如果当前 articleList的长度小于容纳的个数
      // 这时再发请求，补10条数据在后面
      this.getArticleList()
    },
    // 下拉刷新
    pullDownRefreshFn () {
      // 1. 发请求、拿新数组
      this.getArticleList(false)
    },
    // 上拉加载更多
    pullUpLoadMoreFn () {
      // 1. 发请求，拿新一页的数据
      // 只有articleList有值的时候，才会触发触底
      if (this.articleList.length > 0) {
        this.getArticleList()
      }
    },
    // 获取文章列表
    async getArticleList (isPullUp = true) {
      // 2. 获取当前选中的频道的文章列表
      const resp = await getArticleListAPI({
        channelId: this.activeId,
        timestamp: this.timestamp
      })
      const { pre_timestamp: timestamp, results } = resp.data
      // 加载结束的标志判断
      if (timestamp === null || results.length < 10) {
        this.done = true
        return
      }
      // 分页 - 把上一次后台返回的pre_timestamp的值存起来，下一次请求带过去
      this.timestamp = timestamp
      // 数据预处理：在把数组赋值给vue变量之前，把格式转好
      results.forEach(artObj => {
        artObj.pubdate = this.timeAgo(artObj.pubdate)
      })
      if (isPullUp) { // 上拉
        // 2. 旧数据、新数据合并 - 旧数组在前、新数组在后
        this.articleList = [...this.articleList, ...results]
        // 把loading设置为false，可以继续后续的请求
        this.loading = false
      } else { // 下拉
        // 2.  新数据替换之前的旧数组
        this.articleList = results
        // 可以继续下一次的下拉刷新
        this.isLoading = false
      }
    },
    timeAgo (targetDate) {
      // 设置moment的语种 为 中文
      moment.locale('zh-cn')
      // 返回一个转换后的格式，展示在模板中
      return moment(targetDate).fromNow()
    }
  }
}
</script>
<style scoped lang="less">
.logo {
  width: 100px;
  height: 30px;
}
/deep/ .van-tabs__content {
  margin-top: 44px;
}

// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 20px;
  background-color: #fff;
}
// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 60px;
  right: 8px;
  z-index: 999;
}
/deep/ .van-popup {
  position: fixed;
  width: 100%;
  height: 100%;
}
</style>
